<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="app">

            <!-- 3. 使用注册好的组件 -->
            <abc></abc>
            <abc></abc>
        </div>
        <!--  -->
        <template id="info">
            <div>
                <button @click="addFn">累加</button>
                <p>{{number}}</p>
            </div>
        </template>
        <script>
            // 1.创建组件构造器
            // var Profile = Vue.extend({
            //     template: `
            //         <div>
            //             <img  src="../../images/2.jpg" />
            //             <p>描述信息</p>
            //         </div>
            //     `
            // });
            // //2. 注册已经创建好的组件
            // // 第一个参数：指定注册的组件名称：
            // // 第二个参数：传入已经创建好的组件构造器
            // Vue.component("abc", Profile);

            // 创建组件方式二
            // let obj = {
            //     template: `
            //         <div>
            //             <img  src="../../images/2.jpg" />
            //             <p>描述信息</p>
            //         </div>
            //     `
            // };
            // Vue.component("abc", obj);

// 创建组件方式三
            // Vue.component("abc",  {
            //     template: `
            //         <div>
            //             <img  src="../../images/2.jpg" />
            //             <p>描述信息</p>
            //         </div>
            //     `
            // });
            Vue.component(
                "abc",
                {
                    template: "#info",
                    data: function(){
                        return {
                            number:0
                        }
                    },
                    methods: {
                        addFn(){
                            this.number += 1
                        }
                    },
                }
            );


            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1"
                }
            });
        </script>
    </body>
</html>